<template>
  <div class="screen">
    <div  class="content">
      <div class="screen-title">
        <Title>
              Vue3 + TypeScript + Vite
        </Title>
      </div>
      <div class="screen-content">
        <slot name="content"></slot>
      </div>
          <div class="screen-footer">footer</div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent } from "vue";
import Title from "./title.vue";

defineComponent({
  name: "Screen",
});
const propos = defineProps({
  theme:{
    type:String,
  }
})

</script>
<style scoped lang="scss">
.screen {
  position: absolute;
  color: #fff;
  inset: 0;
  background: url('@/assets/bg.png') no-repeat ;
  background-size: 100% 100%;
  .content{
    display: flex;
    height: 100%;
    flex-direction: column;

  }
  .screen-content {
    flex: 1;
  }
  .screen-title{
    color: #11ffa8;
  }
}
.screen::before {
  content: "";
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
